<template>
    <div class="box">
        <div class="header">
            <h1>可视化展板-ECharts</h1>
            <p>当前时间：{{ data }}</p>
        </div>


        
    </div>

</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue";
import { date } from "../api/ulti"
let data = ref()
let timmout = ref()
onMounted(() => {
    data.value = date()
    timmout.value = setInterval(() => {
        data.value = date()
    }, 1000)

})

onUnmounted(() => {
    clearInterval(timmout.value)
})

</script>

<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    background: url('../assets/images/bg.jpg') no-repeat;
    background-size: 100% 100%;

    .header {
        height: 1.25rem;
        line-height: 1.25rem;
        background: url('../assets/images/head_bg.png') no-repeat;
        background-size: 100% 100%;
        position: relative;

        h1 {
            font-size: .475rem;
            line-height: 1rem;
            text-align: center;
            color: #fff;
        }

        p {
            color: rgb(255, 255, 255, 0.7);
            line-height: .9375rem;
            position: absolute;
            right: .375rem;
            top: 0;
            font-size:.25rem;
        }
    }
}
</style>